<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称">
                        <Select v-model="filters.value2" style="width: 250px">
                            <Option v-for="item in options12" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="组团">
                        <Select v-model="filters.value3" style="width: 250px">
                            <Option v-for="item in options13" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="楼栋">
                        <Select v-model="filters.value4" style="width: 250px">
                            <Option v-for="item in options4" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="单元">
                        <Select v-model="filters.value5" style="width: 250px">
                            <Option v-for="item in options5" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="房间号">
                        <Select v-model="filters.value6" style="width: 250px">
                            <Option v-for="item in options6" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="金额">
                        <Input v-model="filters.name" placeholder="金额" style="width: 250px"/>
                    </FormItem>
                    <FormItem label="开始时间">
                        <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择开始日期" style="width: 250px" v-model="date"></DatePicker>
                    </FormItem>
                    <FormItem label="结束时间">
                        <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start" placeholder="请选择结束日期" style="width: 250px" v-model="date1"></DatePicker>
                    </FormItem>
                    <FormItem label="房屋状态">
                        <Select v-model="value" style="width: 250px">
                            <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="费用项目">
                        <Select v-model="value1" style="width: 250px">
                            <Option v-for="item in options1" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="收费状态">
                        <Select v-model="value2" style="width: 250px">
                            <Option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="是否特约服务">
                        <Select v-model="value3" style="width: 250px">
                            <Option v-for="item in options3" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery()" style="margin:5px 5px">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
        </Card>
        <Row :gutter="30" style="margin-top: 10px;">
            <Col span="8">
                    <Card :bordered="false"  style="height: 170px;">
                        <p slot="title" style="font-size: large;">总金额</p>
                        <p style="margin-bottom: 10px;"><span style="font-size: xx-large;color: red;">{{jymoney}} </span>元</p>
                        <br>
                    </Card>
                </Col>
                <Col span="8">
                    <Card :bordered="false"  style="height: 170px;">
                        <p slot="title" style="font-size: large;">已交金额</p>
                        <p style="margin-bottom: 10px;"><span style="font-size: xx-large;color: red;">{{ktxmoney}} </span>元</p>
                        <Button type="primary" icon="ios-search" >查看明细</Button>
                    </Card>
                </Col>
                <Col span="8">
                    <Card :bordered="false" style="height: 170px;">
                        <p slot="title" style="font-size: large;">未交金额</p>
                        <p style="margin-bottom: 10px;"><span style="color: red;font-size: xx-large;">{{ytxmoney}} </span>元</p>
                        <Button type="primary" icon="ios-search" >查看明细</Button>
                    </Card>
                </Col>
        </Row>
        <Row :gutter="30" style="margin-top: 10px;">
                <Col span="8">
                    <Card :bordered="false" style="height: 170px;">
                        <p slot="title" style="font-size: large;">已交户数</p>
                        <p style="margin-bottom: 10px;"><span style="color: red;font-size: xx-large;">{{ytxmoney}} </span>元</p>
                        <Button type="primary" icon="ios-search" >查看明细</Button>
                    </Card>
                </Col>
                <Col span="8">
                    <Card :bordered="false" style="height: 170px;">
                        <p slot="title" style="font-size: large;">未交户数</p>
                        <p style="margin-bottom: 10px;"><span style="color: red;font-size: xx-large;">{{ytxmoney}} </span>元</p>
                        <Button type="primary" icon="ios-search" >查看明细</Button>
                    </Card>
                </Col>
        </Row>
        <Row style="margin-top: 20px;">
            <Card shadow>
                <div slot="title">
                    <Row>
                        <Col span="8" :justify="start"><p style="font-size: large;color: #8c0776">物业缴费率最近半年走势</p></Col>
                        <Col span="16" :justify="end">
                            <Form :model="modal1" ref="form1" label-position="right" :label-width="90" inline>
                            <Col span="12">
                                <FormItem label="费用项目">
                                    <Select v-model="value1" style="width: 250px">
                                        <Option v-for="item in options1" :value="item.value" :key="item.value">{{ item.label }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="6">
                                <FormItem label="收费状态">
                                    <Select v-model="value2" style="width: 250px">
                                        <Option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label }}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            </Form>
                        </Col>
                    </Row>
                </div>
                <chart-line style="height: 300px;" :value="lineData"/>
            </Card>
        </Row>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'
    import {ChartLine} from '_c/charts'


    const token = Cookies.get(TOKEN_KEY)
    //校验规则
    let handleQuery=function(){
        console.log("nono")
    }
    export default {
        name: "disList",
        components: {
            Treeselect,
            ChartLine,
        },
        data() {
            return {
                lineData: {
                    "3月": 26321,
                    "4月": 12340,
                    "5月": 24643,
                    "6月": 1322,
                    "7月": 13253,
                    "8月": 34235,
                },
                options12: [{
                  value: '1',
                  label: '朝舞小区'
                }, {
                  value: '2',
                  label: '康泰小区'
                }],
                value12: '',
                options13: [{
                  value: '1',
                  label: 'A组'
                }, {
                  value: '2',
                  label: 'B组'
                }],
                value13: '',
                options4: [{
                  value: '1',
                  label: '1栋'
                }, {
                  value: '2',
                  label: '2栋'
                }],
                options5: [{
                  value: '1',
                  label: '1单元'
                }, {
                  value: '2',
                  label: '2单元'
                }],
                value5: '',
                options6: [{
                  value: '1',
                  label: '1-1'
                }, {
                  value: '2',
                  label: '1-2'
                }],
                value6: '',
                filters:{},
                date:'',
                date1:'',
                jymoney:1022,
                ytxmoney:29103,
                ktxmoney:2020,
                options: [{
                    value: '1',
                    label: '入住'
                },{
                    value: '2',
                    label: '空置'
                }],
                value:"",
                options1: [{
                    value: '1',
                    label: '车位管理费'
                },{
                    value: '2',
                    label: '物业管理费'
                },{
                    value: '1',
                    label: '垃圾清理费'
                }],
                value1:"",
                options2: [{
                    value: '1',
                    label: '已收费'
                },{
                    value: '2',
                    label: '未收费'
                }],
                value2:"",
                options3: [{
                    value: '1',
                    label: '是'
                },{
                    value: '2',
                    label: '否'
                }],
                value3:"",
                value4: '',
            }
        },
        created: function () {
        },
        methods: {
            handleQuery
        }
    };
</script>
<style lang="less">
</style>
